import React, { memo, useEffect} from 'react';
import {  useNavigate, useParams } from 'react-router-dom'
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { SearchWrapper, TabsWrapper, ItemWrapper } from './style'
import { searchTabsContent } from '@/commom/local-data'
import { getSearchResultAction } from './store/actionCreators'
import SearchSong from './c-cpns/search-song';
import SearchArtist from './c-cpns/search-artist';
import SearchAlbum from './c-cpns/search-album';
import SearchVideo from './c-cpns/search-video';
import SearchLyric from './c-cpns/search-lyric';
import SearchPlaylist from './c-cpns/search-playlist';
import SearchDjradio from './c-cpns/search-djradio';
import SearchUser from './c-cpns/search-user';

export default memo(function Search() {
  const navigator = useNavigate()
  const { searchResult } = useSelector(state => ({
    searchResult:state.getIn(['search','searchResult'])
  }), shallowEqual)
  const chooseTab = key => {
    navigator(`/search/${keywords}/${searchTabsContent[key].type}`)
  }
  const dispatch = useDispatch()
  let { type, keywords } = useParams()
  useEffect(() => {
    dispatch(getSearchResultAction(keywords,type))
  }, [dispatch, keywords, type])
  const currentIndex = searchTabsContent.findIndex(item => item.type+'' === type+'')
  const list = searchResult[searchTabsContent[currentIndex].title] || []
  const renderContent = type => {
    switch (type) {
      case '1':
        return <SearchSong tracks={list} />
      case '100':
        return <SearchArtist list={list} />
      case '10':
        return <SearchAlbum list={list} />
      case '1014':
        return <SearchVideo list={list} />
      case '1006':
        return <SearchLyric list={list} />
      case '1000':
        return <SearchPlaylist list={list} />
      case '1009':
        return <SearchDjradio list={list}/>
      default:
        return <SearchUser list={list}/>
    }
  }
  return (
    <SearchWrapper className="wrap-v2">
      <TabsWrapper>
        <div className="tabs">
          {
            searchTabsContent.map(item => {
              return (
                <ItemWrapper className="item" key={item.type} isActive={item.type+'' === type+''} onClick={e => chooseTab(item.key)}>{item.name}</ItemWrapper>
              )
            })
          }
        </div>
        <div className="content">
          {
            renderContent(type)
          }
        </div>
      </TabsWrapper>
    </SearchWrapper>
  
  )
});
